<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link href="js/mui/css/mui.min.css" />
		<link rel="stylesheet" href="css/common2.css" />
		<link rel="stylesheet" href="css/login.css" />

		<script src="js/mui/js/mui.min.js"></script>
		<script src="js/libs/vue/vue.min-2.4.2.js"></script>
		<script src="js/libs/axios.min.js"></script>
		<script src="js/libs/vue-resource.js"></script>
		<script src="js/libs/md5.js"></script>
		<script src="js/pagejs/base.js"></script>
		<script src="js/libs/axios.min.js"></script>
	</head>

	<body>
		<div id="login"></div>
		<div class="login_bg" id="app">
			<template>
				<div v-show="islogin" class="background">

				</div>
				<div v-show="islogin" class="modal">
					<img class="loading-gif" src="images/loading.gif"/>
				</div>
				<br/>
				<br/>
				<br/><br/>
				<div id="logo">
					<img src="images/logo.png" alt=""/>
				</div>
				<br/>
				<br/>
				<form action="">
					<div class="code">
						<lable>组织编号：</lable>
						<input type="text" name="OrgID" v-model="user.OrgID" placeholder="组织编号" />
					</div>
					<div class="userName">
						<lable>用户名：</lable>
						<input type="text" name="UserName" v-model="user.UserName" placeholder="请输入用户名" />
					</div>
					<div class="passWord">
						<lable>密&nbsp;&nbsp;&nbsp;码：</lable>
						<input type="password" name="PassWordExt" v-model="user.PassWordExt" placeholder="请输入密码" />
					</div>
					<!--<div class="choose_box">
					<div>
						<input type="checkbox" checked="checked" v-model="isRemember" name="isRemember" />
						<lable>记住密码</lable>
					</div>

				</div>-->
					<button class="login_btn" type="button" v-on:click="getdata()">登&nbsp;&nbsp;录</button>
					<br/>
					<br/><br/>
					<div>
						<p style="text-align: left;float:left">
							<!--<a href="newPassword.html">忘记密码</a>-->
						</p>
						<!--<p style="text-align: right;float:right">
						<a href="register.html">没有账户？新注册</a>
					</p>-->
						<p style="overflow: auto;"></p>
					</div>
				</form>

			</template>
		</div>
		<script>
			function reg() {
				location.href = "register.html";
			}
		</script>

		<script>
			var vm_form = new Vue({
				el: '#app',
				data: {
					user: {
						OrgID: "180718005",
						PassWordExt: "",
						UserName: "",
						AccessToken: 0
					},
					password: "",
					isRemember: false,
					islogin: false
				},
				methods: {
					getdata: function() {
						this.islogin = true;
						if(this.checks()) {
							this.password = this.user.PassWordExt;
							this.user.PassWordExt = hex_md5(vm_form.user.PassWordExt)
							axios.post(server + '/LoginService/User/Login/abc', JSON.stringify(this.user), {
								emulateJSON: true,
								headers: {
									'Content-Type': 'application/json'
								}
							}).then(
								function(res) {
									vm_form.islogin = false;
									if(res.data == -1)
										mui.alert('无效的用户名或组织编号', '信息');
									else if(res.data == -2)
										mui.alert('用户名或密码错误', '信息');
									else if(res.data == -3)
										mui.alert('当前登录用户在线数量已经超出，不能继续登录', '信息');
									else if(res.data == -4)
										mui.alert('超过服务期限，请付费继续使用', '信息');
									else {

										localStorage.setItem("OrgID", vm_form.user.OrgID);
										localStorage.setItem("AccessToken", res.request.response);
										localStorage.setItem("UserName", vm_form.user.UserName);
										if(this.isRemember) {
											localStorage.setItem("PassWord", this.password);
										}
										console.info(res);
										location.href = "index.html";
									}
								},
								function(res) {
									this.islogin = false;
									mui.toast('服务器错误，登录失败');
								});
							this.user.PassWordExt = "";

						}
						else
							this.islogin = false;
						
					},
					checks: function() {
						//至少9位
						var reg = /^\d{9,}$/;
						if(!this.user.OrgID) {
							mui.alert('组织编号不能为空', '警告');
							return false;
						} else if(!reg.test(this.user.OrgID)) {
							mui.alert('请输入正确的组织编号', '警告');
							return false;
						} else if(!this.user.UserName) {
							mui.alert('请输入用户名', '警告');
							return false;
						} else if(!this.user.PassWordExt) {
							mui.alert('请输入密码', '警告');
							return false;
						} else
							return true;
					}
				}
			})
		</script>
	</body>

</html>